/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, LineColumn, InputLine, SuffixInput, Table, TableBody, TableRow, CCell, BlobInputList, Input, useTheme, Cell, Select,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {setupItemAreaRoute} from "./orcIspConfig";
import {EditStorageContext} from "../../StorageContext";
import {floatInterception} from "../../../common/tool";
import {useCalcEvalTotalScore} from "../hook/useCalcEvalTotalScore";


export const itemA结论=['检验日期','检验日期1','级别整','本体状','建议','检验结论','结论附加','大备注','unqA','unqB'];
//统一做法，unq 独立的
const itemA结论m=itemA结论.concat(['unq']);
//评估 下结论页面：
export const Conclusion=
    React.forwardRef((
        { children, show ,alone=true,refWidth,rep}:InternalItemProps,  ref
    ) => {
        const theme = useTheme();
        const [getInpFilter]=useMeasureInpFilter(null,itemA结论m,);
        const {inp, setInp} = useItemInputControl({ ref });
        //【特殊需要】 提取全部的配置
        const impressionismAs =React.useMemo(() => {
            return setupItemAreaRoute({rep, theme});
        }, [theme]);
        //特例：直接从 底层状态总库当中 获取数据。
        const {storage, } =React.useContext(EditStorageContext) as any;
        const evalTotalScore=floatInterception(useCalcEvalTotalScore({itRes:storage, ItemArs:impressionismAs?.Item}),2);

        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={'五、评估结论'}>
                <Text  variant="h5">
                    五、评估结论， 评估综述：
                </Text>
                (一) 自动扶梯(自动人行道)状况：通过对该自动扶梯(自动人行道)的安全性能技术 评估，该自动扶梯(自动人行道)设备本体安全状况分值为= {evalTotalScore} <br/>
                <hr/>
                <LineColumn column={6} >
                    <InputLine  label='自动扶梯(自动人行道)安全级别整体水平为' >
                        <SuffixInput  value={inp?.级别整 ||''} onSave={txt=> setInp({...inp,级别整: txt || undefined })}>级</SuffixInput>
                    </InputLine>
                    <InputLine  label='自动扶梯(自动人行道)本体状态' >
                        <Input  value={inp?.本体状 ||''}
                                onChange={e => setInp({...inp,本体状:e.currentTarget.value || undefined}) }/>
                    </InputLine>
                </LineColumn>
                (二)存在的风险：<br/>
                1、存在 {inp?.unqA?.length || '<未初始化>'} 个不符合项目，这些项目已存在一定安全风险，必须整改（详见表 1）。<br/>
                2、存在 {inp?.unq?.length || '<未初始化>'} 个不符合项目，其安全技术性能降低，具有一定的潜在安全风险，对以上项目建议整改（详见表2）。在整改完成前，维保单位应当加强日常维护保养，使用单位应当采取有效的安全监护措施；<br/>
                3、存在 {inp?.unqB?.length || '<未初始化>'} 个不符合项目，该自动扶梯采用旧的制造和安装技术，对以上项目建议整改以提升自动扶梯安全技术性能。<br/>
                评估结论：
                <Text  variant="h5">（三）、使用维保建议 》</Text>
                <BlobInputList  value={inp?.建议 ||''} rows={8} onListChange={v => setInp({...inp,建议:v || undefined}) }
                                datalist={["维保单位应根据电梯零部件存在风险的评估分析，按照TSG T5002-2017《电梯维护保养规则》要求，对电梯薄弱环节的零部件加强监控；除了按TSG T5002-2017《电梯维护保养规则》做好维护保养外，零部件存在风险而未达到功能失效，暂时不需要更换新零部件或对原有零部件拆卸、加工、修理的项目，应增加维护保养频次和维护保养项目。",
                                    "主驱动链、梯级链和扶手带驱动链使用寿命已接近末期，维保单位应对其增加维护保养频次。",
                                ]}
                />
                <Text  variant="h4">评估结论 》</Text>
                   1、经过对自动扶梯（自动人行道）所存在的风险及电梯运行能力综合分析，建议对该自动扶梯（自动人行道）进行
                <InputLine label='评估结论-建议'>
                    <Select value={inp?.检验结论 || ''} inputSize="md" css={{minWidth: '140px', fontSize: '1.3rem', padding: '0 1rem'}}
                            onChange={e => setInp({...inp, 检验结论: e.currentTarget.value || undefined})}>
                        <option></option>
                        <option>继续使用</option>
                        <option>一般修理</option>
                        <option>重大修理</option>
                        <option>改造</option>
                        <option>报废</option>
                        <option>更新</option>
                    </Select>
                </InputLine>
                <Text  variant="h4">结论附加 》</Text>
                <BlobInputList  value={inp?.结论附加 ||''}  rows={4} datalist={['2、如果使用单位完成本报告书表1、2、3的全部项目整改，该自动扶梯（自动人行道）的下次评估时间为8年，否则该自动扶梯（自动人行道）的下次评估时间为5年。']}
                                onListChange={v => setInp({ ...inp, 结论附加: v || undefined}) } />
                <div><Text  variant="h5">备注:</Text>
                    <BlobInputList  value={inp?.大备注 ||''}  rows={5} datalist={["根据维护保养记录：未更换过主驱动链、梯级链和扶手带驱动链。"]}
                                    onListChange={v => setInp({ ...inp, 大备注: v || undefined}) } />
                </div>
                <LineColumn>
                    <InputLine  label='设置评估日期' >
                        <Input  value={inp?.检验日期 ||''}  type='date'
                                onChange={e => setInp({ ...inp, 检验日期: e.currentTarget.value}) } />
                    </InputLine>
                    <InputLine  label='评估开始日期' >
                        <Input  value={inp?.检验日期1 ||''}  type='date'
                                onChange={e => setInp({ ...inp, 检验日期1: e.currentTarget.value}) } />
                    </InputLine>
                </LineColumn>
            </InspectRecordLayout>
        );
} );

export const ConclusionVw= ( {orc, rep, evalTotalScore,label} : { orc: any,rep:any,evalTotalScore:string,label:string}
) => {
    return <React.Fragment>
        <Text variant="h4" css={{"@media print": {pageBreakBefore: 'always',},
        }}>{label}</Text>
        <Table fixed={ ["5.5%","%"] }  css={ {borderCollapse: 'collapse' } }  tight  miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Conclusion'}>
                    <TableRow >
                        <CCell rowSpan={3} split={true}><Text css={{fontSize: '1.2rem'}}>评估综述</Text></CCell>
                        <Cell><Text css={{textIndent: '2rem', display: 'flex',}}>
                            (一) 自动扶梯(自动人行道)状况：通过对该自动扶梯(自动人行道)的安全性能技术评估，该自动扶梯(自动人行道)设备本体安全状况分值为 {evalTotalScore} 分，
                            自动扶梯(自动人行道)安全级别整体水平为“ {orc.级别整} ”级， 自动扶梯(自动人行道)本体状态“ {orc.本体状} ”。
                        </Text></Cell>
                    </TableRow>
                    <TableRow >
                        <Cell><Text css={{textIndent: '2rem', display: 'flex',}}>
                            (二)存在的风险：
                        </Text>
                            <Text css={{textIndent: '2rem', display: 'flex',}}>
                                1、存在 {orc?.unqA?.length || 0 } 个不符合项目，这些项目已存在一定安全风险，必须整改（详见表 1）。
                            </Text>
                            <Text css={{textIndent: '2rem', display: 'flex',}}>
                                2、存在 {orc?.unq?.length || 0 } 个不符合项目，其安全技术性能降低，具有一定的潜在安全风险，对以上项目建议整改（详见表2）。在整改完成前，维保单位应当加强日常维护保养，使用单位应当采取有效的安全监护措施；
                            </Text>
                            <Text css={{textIndent: '2rem', display: 'flex',}}>
                                3、存在 {orc?.unqB?.length || 0 } 个不符合项目，该自动扶梯采用旧的制造和安装技术，对以上项目建议整改以提升自动扶梯安全技术性能。
                            </Text>
                        </Cell>
                    </TableRow>
                    <TableRow >
                        <Cell><Text css={{textIndent: '2rem', display: 'flex', whiteSpace: 'pre-wrap'}}>
                            (三)、使用维保建议：<br/>
                            {orc?.建议 || '／'}
                        </Text>
                        </Cell>
                    </TableRow>
                    <TableRow id={'Conclusion'}>
                        <CCell><Text css={{fontSize: '1.2rem'}}>评估结论</Text></CCell>
                        <Cell><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
                            <Text css={{fontSize: '1rem',fontWeight: 800}}>1、经过对自动扶梯（自动人行道）所存在的风险及电梯运行能力综合分析，建议对该自动扶梯（自动人行道）进行
                                <Text css={{fontSize: '2rem'}}>{orc?.检验结论 || '／'}</Text>。<br/>
                                {orc?.结论附加}
                            </Text></div>
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <CCell>备注</CCell>
                        <Cell><div css={{whiteSpace: 'pre-wrap'}}>
                            <Text>{orc?.大备注 || '／'}
                            </Text></div>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
    </React.Fragment>;
};
